<template>
    <div>
        <my-back-btn></my-back-btn>
        <div id="image-box">
            <img id="image" :src="$store.state.imageSrc">
        </div>

        <div id="preview-box">
            <div class="text-center mt-2">头像预览</div>
            <div id="before" class="mt-4 mx-auto"></div>
            <v-container>
                <v-row>
                    <v-col cols="6">
                        <v-btn block color="primary" @click="updateAvatar()">修改</v-btn>
                    </v-col>
                    <v-col cols="6">
                        <v-btn block color="warning" @click="$router.push('/user-center/profile')">返回</v-btn>
                    </v-col>
                </v-row>
            </v-container>
        </div>
    </div>
</template>

<script>
    import Cropper from 'cropperjs'
    import 'cropperjs/dist/cropper.css'
    import MyBackBtn from "./MyBackBtn";

    export default {
        name: "MyUpdateAvatarDialog",
        components: {MyBackBtn},
        mounted() {
            if (this.$store.state.imageSrc === '') {
                this.$router.push('/user-center/profile');
            }
            const image = document.getElementById("image")
            this.myCropper = new Cropper(image, {
                viewMode: 1,
                dragMode: 'none',
                initialAspectRatio: 1,
                aspectRatio: 1,
                preview: '#before',  // 预览图像挂载元素
                background: false,
                guides: false,
                autoCropArea: 0.4,
                zoomOnWheel: false,
                center: false
            })
        },
        beforeDestroy() {
            this.$store.commit("setImageSrc", '');
        },
        data() {
            return {
                myCropper: null,
                afterImg: ''
            }
        },
        methods: {
            updateAvatar() {
                // 生成预览图片的base64
                this.afterImg = this.myCropper.getCroppedCanvas({
                    imageSmoothingQuality: 'high'
                }).toDataURL('image/jpeg');
                console.log(this.afterImg)
                // 压缩图片
                let img = document.createElement("img")
                img.onload = () => {
                    let canvas = document.createElement("canvas");
                    canvas.width = 100;
                    canvas.height = 100;
                    let ctx = canvas.getContext("2d");
                    ctx.drawImage(img, 0, 0, 100, 100);
                    let avatar = canvas.toDataURL('image/jpeg', 0.8);
                    // 保存图片
                    let _this = this;
                    _this._post({
                        url: '/user/save-avatar',
                        data: {
                            avatar: avatar
                        }
                    }).then(rsp => {
                        _this.$router.push("/user-center/profile");
                    }).catch(error => {
                        console.log(error);
                        _this.$error({message: '保存头像失败'});
                    })
                }
                img.src = this.afterImg;
            }
        }
    }
</script>

<style scoped>
    #preview-box {
        position: fixed;
        background-color: white;
        width: 200px;
        top: 150px;
        left: 650px;
    }

    #image-box {
        position: fixed;
        top: 50px;
        left: 100px;
        width: 500px;
        height: 500px;
    }

    #before {
        width: 100px;
        height: 100px;
        overflow: hidden;
    }
</style>